import {Flex} from 'antd-mobile';
import {connect} from 'react-redux'
import Link from 'next/link'
import Image from 'next/image';
import { imgBase, getMbiPathName }  from '@/utils/index'
import bannerTitle from '@/img/top-title.png'
import bannerBg from '@/img/bg-top.jpg'
import styles from './TabTop.module.scss';
type IProps = {
  mbiNavigationList: IMbiNavigation[]
}
const TabTop = (props: IProps) => {
  const {mbiNavigationList} = props
  const iconObj = {
    1: 'mbi_ico_hotel@3x.png',
    2: 'mbi_ico_scenicspot@3x.png',
    3: 'mbi_ico_group@3x.png',
    4: 'mbi_ico_apartment@3x.png',
    5: 'mbi_ico_office@3x.png',
    6: 'mbi_ico_property@3x.png',
    7: 'mbi_ico_complex@3x.png',
    8: 'mbi_ico_supplychain@3x.png',
  }
  return (
    <section className={styles["tab-top-box"]}>
      <Flex direction="column" justify="around">
          <img className={styles["top-img"]} src={`${bannerBg.src}`}/>
          <div className={styles["position-box"]}>
            <div className={styles["top-title"]}>
              <img src={`${bannerTitle.src}`}/>
              <p>商业空间产业品牌价值查询平台</p>
            </div>
          </div>
          <div className={styles["top-bottom-list"]}>
            {
              mbiNavigationList.map((item, index) => {
                const {indexType, typeId, id} = item;
                const query = {indexType, typeId};
                return (
                  Number(item.level) === 0 && <Link href={{ pathname: getMbiPathName(item.indexType), query }} as={`/brandrankings/${indexType}/${typeId}`} key={`mbi-top-${index}`} >
                    <a className={styles["list"]} >
                      <div className={styles['img-box']}>
                        <Image  src={`${imgBase}/tabicon/${iconObj[item.id]}`} alt={item.typeName} layout="fill" />
                      </div>
                      <p className={styles["list-title"]}>{item.typeName}</p>
                    </a>
                  </Link>
                )
              })
            }
          </div>
      </Flex>
    </section>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    mbiNavigationList: state.mbiNavigation,
  };
};

export default connect(mapStateToProps)(TabTop);
